<template>
  <div class="notice-container">
    <div class="left">
      <div
        @click="handleTypeClick(item)"
        class="type-item"
        v-for="item in typeList"
        :class="{ active: currentTag === item.id }"
      >
        {{ item.typeName }}
      </div>
    </div>
    <div class="right">
      <template v-if="msgList.length > 0">
        <div class="content-item" v-for="item in msgList">
          <div class="item-title">
            <el-tag type="danger">{{ currentTagName }}</el-tag>
            <div class="title" @click="handleClick(item)">{{ item.title }}</div>
          </div>
          <div class="date-desc">{{ new Date(item.createTime).toLocaleString() }}</div>
        </div>
      </template>
      <el-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElTag, ElEmpty } from "element-plus";

import { getMessageListApi, getMessageTypeApi } from "@/api/homePage/messageApi";
import { useRouter } from "vue-router";
const router = useRouter();
const typeList = ref<any>([]);
const msgList = ref<any>([]);

const currentTag = ref<number>(0);
const currentTagName = ref<string>("");
(async () => {
  typeList.value = await getMessageTypeApi();
  if (typeList.value.length > 0) {
    currentTag.value = typeList.value[0]?.id;
    currentTagName.value = typeList.value[0]?.typeName;
    msgList.value = await getMessageListApi({ typeId: currentTag.value });
  }
})();

const handleTypeClick = async (item: any) => {
  currentTag.value = item.id;
  currentTagName.value = item.typeName;
  msgList.value = await getMessageListApi({ typeId: item.id });
};

function handleClick(row: any) {
  router.push({
    name: "msgDetail",
    params: {
      id: row.id,
    },
  });
}
</script>

<style scoped lang="scss">
@import "@/css/respondMixin";

.notice-container {
  border: 2px solid black;
  display: flex;
  height: 100%;
  @include respond-to("phone") {
    min-height: 4.5rem;
  }

  .left {
    width: 150px;
    text-align: center;
    background-color: #009688;
    color: #fff;
    flex-shrink: 0;

    .type-item {
      cursor: pointer;
      padding: 10px 0;
      height: 40px;

      &.active {
        background-color: #00665e;
      }
    }

    @include respond-to("phone") {
      width: 3rem;
    }
  }

  .right {
    width: 100%;
    height: 100%;
    padding: 15px;

    @include respond-to("phone") {
      padding: 3px;
    }
    .content-item {
      display: flex;
      justify-content: space-between;
      padding: 8.5px 0;
      color: #424242;
      font-size: 15px;

      .item-title {
        display: flex;
        .title {
          margin-left: 30px;
          cursor: pointer;
          &:hover {
            color: #aaa;
          }
        }
      }

      .date-desc {
        @include respond-to("phone") {
          display: none;
        }
      }
    }
  }
}
</style>
